<!DOCTYPE html>
<html>
<head>
    <title>Circular Motion Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="400"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters
    const cx = 225;
    const cy = 180;
    const radius = 120;
    const objectRadius = 5;
    const lineWidth = 2;

    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Draw the circular path
    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the radius line and the object
    const objectX = cx + radius;
    const objectY = cy;

    // Radius line
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(objectX, objectY);
    ctx.stroke();

    // Object (mass)
    ctx.beginPath();
    ctx.arc(objectX, objectY, objectRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 3. Add text labels for mass and radius
    ctx.font = 'bold 20px sans-serif';
    ctx.textAlign = 'center';
    const textX = cx + radius / 2;

    // Mass label ("2 kg")
    ctx.textBaseline = 'bottom';
    ctx.fillText('2 kg', textX, cy - 8);

    // Radius label ("6 m")
    ctx.textBaseline = 'top';
    ctx.fillText('6 m', textX, cy + 8);

    // 4. Draw the rotational direction arrow
    const arrowArcRadius = radius + 25;
    // Define the start and end of the visible arc segment
    const arcStartAngle = 0.8 * Math.PI; // Top-left
    const arcEndAngle = 1.3 * Math.PI;   // Bottom-left

    // Draw the arc path itself. We draw it clockwise to get the correct segment on the left.
    ctx.beginPath();
    ctx.arc(cx, cy, arrowArcRadius, arcStartAngle, arcEndAngle, false); // false for clockwise
    ctx.stroke();
    
    // Draw the arrowhead at the end of CCW motion, which is at arcStartAngle.
    const arrowheadTipAngle = arcStartAngle;
    const headLength = 18;
    
    const tipX = cx + arrowArcRadius * Math.cos(arrowheadTipAngle);
    const tipY = cy + arrowArcRadius * Math.sin(arrowheadTipAngle);
    
    // The direction of motion for CCW is tangent, at angle (tip_angle + PI/2).
    // The arrowhead wings point backward, so their base angle is (tangent_angle + PI).
    const baseAngle = (arrowheadTipAngle + Math.PI / 2) + Math.PI;
    const wingSpread = Math.PI / 4; // Angle between the two wings

    const wing1x = tipX + headLength * Math.cos(baseAngle - wingSpread / 2);
    const wing1y = tipY + headLength * Math.sin(baseAngle - wingSpread / 2);
    const wing2x = tipX + headLength * Math.cos(baseAngle + wingSpread / 2);
    const wing2y = tipY + headLength * Math.sin(baseAngle + wingSpread / 2);

    ctx.beginPath();
    ctx.moveTo(tipX, tipY);
    ctx.lineTo(wing1x, wing1y);
    ctx.lineTo(wing2x, wing2y);
    ctx.closePath();
    ctx.fill();

    // 5. Add the figure caption
    ctx.font = '20px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('Fig. 1.66.', cx, canvas.height - 20);

</script>

</body>
</html>